<template>
	<div class="fix-all  order-detail">
		<div class="menu">
			<span class="vm menu-item" :class="{'active':page==1}" v-gesture:tap.stop.prevent="btnSwitch(1)">订单状态<span class="line"></span></span><!--
			--><span class="vm menu-item" :class="{'active':page==2}" v-gesture:tap.stop.prevent="btnSwitch(2)">订单详情<span class="line"></span></span>
		</div>
		<section v-if="page==1" class="content ">
			<dl class="order-status">
				<!-- <span v-show="orderState.countdown">{{""orderState.countdown}}</span> -->
				<dt :class="item.processStatus.status">
					<!-- !item.extended.numberPlate&&? -->
					<!-- <span class="process-msg vm">{{item.extended.numberPlate&&item.processStatus.status=="received"?"请等待送餐":(item.processStatus.processStatusMsg||"请凭号取餐")}}</span> -->
					<p class="p-info"><i class="detail-icon vm" :class="iconClass"><span class="number">{{(item.extended.numberPlate&&(item.extended.numberPlate+item.extended.numberPlateUnit)) || item.serialNo}}</span></i></p>
					<p class="p-number"><span class="process-msg">{{item.processStatus.status=="received"?"请等待送餐":item.processStatus.processStatusMsg}}</span></p>
				</dt>
				<dd v-for="detail in item.processStatus.details"><i class="icon-status-msg abs divvma" ></i><span class="status-msg">{{item.extended.numberPlate&&detail.status=="received"?"通知厨房成功，请等待送餐":detail.statusMsg}}</span><span class="time">{{detail.createTime | formatDate}}</span></dd>

			</dl>
		</section>
		<section v-else class="content-detail ">
			<dl class="order-list-dl" :class="{'one':item.cart.qty==1}">
				<dt class="order-list-dt"><span class="dt1">{{item.extended.numberPlate ? item.extended.numberPlate+item.extended.numberPlateUnit:"取餐号："+ item.serialNo}}</span><span class="dt3">￥{{item.amountDue || item.subtotal}}</span></dt>
				<dd class="order-list-dd order-dd-height"><span class="name">订单号</span><span class="qty">{{item.id}}</span></dd>
				<dd class="order-list-dd order-list-title order-dd-height mb"><span class="name">支付方式</span><span class="qty">在线支付</span></dd>
				<dd class="order-list-dd item " v-for="dd in item.cart.items"><span class="name">{{dd.inventoryName}}</span><span class="qty">X {{dd.qty}}</span></dd>
				<dd class="order-list-dd time mt"><span class="name">合计{{item.cart.qty}}项</span><span class="amount">{{(item.closeTime||item.createTime) | formatDate}}</span></dd>
			</dl>
		</section>
    <button class="bottom-buttom" v-gesture:tap.stop.prevent="onClick()">{{btnContent}}</button>

	</div>
</template>

<script type="text/javascript">
	import vueCo from 'vue-co';
	import HistoryManage from '../lib/history-manage';
	import Order from '../business/order';
	import Inventories from '../business/inventories';
	import {refundOrder,changeLoadingOptions} from "../vuex/actions";
	import {deepClone} from "../lib/utils";
	import Modifiers from "../business/modifiers"

	export default vueCo({
		components: {
			'mpj-dialog': require('./../components/dialog/mpj-dialog')
		},
		vuex:{
			getters:{
				route: (state)=>state.route,
				orderState:({order})=>order,
				msg:({msg})=>msg
			},
			actions:{
				refundOrder,changeLoadingOptions
			}
		},
    data:function(){
      return {
        order: this.$parent.order,
				allOrder:this.$parent.allOrder,
				//todo item:{}   vue的检测问题
				item:null,
				page:1,
				options:{
					iconType: 'warn' ,
					content:"请申请退款",
					btnContent:"申请退款",
					btnFn:function(){
						alert("哈哈哈");
					},
					show:true
				},
				isBtn:false
      }
    },
		props:{
			isShowConfirmOrder: {
				require: true
			}
		},
		methods:{
      onClick: function * (){

				const self = this;
				if (self.btnContent.indexOf("申请退款")>-1){
					self.refundOrder(self.item);
				} else if(self.btnContent.indexOf("再来一单")>-1){
					//再来一单
					//先检查商品和商品选项是否还存在

					if(!self.item.fixed&&self.route.query.id){
						self.changeLoadingOptions({show:true,content:"加载数据"})
						const ivts = yield Inventories.getIvtsByIds(self.item.cart.items.map(item=>{return item.inventoryId}));
						self.changeLoadingOptions({show:false})

						const items  = self.item.cart.items;
						for (let i = 0, l = items.length; i < items.length; i++) {
							let ivt = ivts[items[i].inventoryId];
							if(ivt){
								const cartModifiers = items[i].modifiers;
								items[i].modifiers = new Modifiers(ivt.modifiers);
								items[i].oldModifiers = ivt.modifiers;
								const newModifiers = items[i].modifiers;
								const newModifiersArr = newModifiers.items.map(item=>{return item.id});
								for (let ii = 0,il = cartModifiers.items.length; ii < il; ii++) {
									const index = newModifiersArr.indexOf(cartModifiers.items[ii].id)
									if(index>-1){
										newModifiers.items[index].options = cartModifiers.items[ii].options;
									}	else {
										//删除 没得这个商品选项了 就删除商品
										items.splice(i,1);
										break;
									}
								}
							}else {
								//删除这个商品
								items.splice(i,1)
								break;
							}
						}
					}

					this.item.fixed = true;
					// const order = JSON.parse(JSON.stringify(this.item))
					const order = deepClone(this.item);
					this.order.emptyOrder();
					this.order.setNewOrder(order);
					this.isShowConfirmOrder = false;
					this.isBtn = true;
					this.$router.replace({name:"inventory-list",query:{isShowShoppingCart:1},params:{isShowShoppingCart:true}});
				}
				else if(self.btnContent.indexOf("继续下单")>-1){
					//继续点单
					this.$parent.isShowShoppingCart = false;
					this.isShowConfirmOrder = false;
					this.order.emptyOrder();
					this.isBtn = true;
					this.$router.replace({name:"inventory-list"});
				} else {
					alert(self.btnContent);
				}

		  },
			btnSwitch: function(i){

				this.page=i;
			},
			dialogFn:function(){
				alert(1)
			}
	  },
		route: {
		  data: function ({ to: { query: { id }}}) {
				// if (id&&this.allOrder.length>0){
				// 	this.item = this.allOrder[id];
				// } else{
				// 	this.item = this.order;
				// }

		  },
			canDeactivate : function(transition){
				//http请求没有返回，不能返回
				debugger
				if(this.msg.mpjDialogOpts.show){
					return transition.abort();
				}
				//页面点击的
				if(this.isBtn){
					return transition.next();
				}else {
					//浏览器返回
					this.order.emptyOrder();
					this.$router.go({name:"order-list"});
					return transition.next();
				}
			}
		},
		ready(){
			if (this.route.query&&this.route.query.id&&this.allOrder.length>0){
				this.item = this.allOrder[this.route.query.id];
			} else{
				this.item = this.order;
				this.item.fixed = true;
				//加入 allOrder
				// debugger
				let order = Order.getProcessStatusOrderByOrder(this.order);
				this.allOrder.unshift(order);
				// this.order.emptyOrder();
			}
		},
		computed:{
			btnContent(){
				let str;
				if(this.item.processStatus.status=="ordered" || this.item.processStatus.status=="query"){
					str =  "";
				} else if(this.page==2 ){
					if(this.item.processStatus.status=="order-fail"){
						str = "申请退款";
					} else {
						str =  "再来一单"
					}
				}else if (this.page==1) {
					if(this.item.processStatus.status=="order-fail"){
						str = "申请退款";
					}  else {
						str = "继续下单"
					}
				}
				return str;
			},
			orderMsg(){
				const self  =this;
				return self.item.orderMsg || Order.getOrderMsg(self.item)
			},
			iconClass(){
				return {
					'iconfont icon-notify-kitchen': this.item.processStatus.status == 'ordered',
					'iconfont icon-notiy-fail': this.item.processStatus.status == 'order-fail',
					'refund iconfont icon-cancel-order': this.item.processStatus.status == 'refund-success',
					'iconfont icon-cancel-order': this.item.processStatus.status == 'cancel',
					'icon-order-numberplate': this.item.processStatus.status == 'received'
				}
			}
		}
  })
</script>

<style lang='sass'>
	@import '../assets/sass/global/themes.scss';
	$order-detail-line:1px solid #ececec;
  .order-detail{background: #f7f7f7;}
  .order-detail .plate{border: 1px solid #d9d9d9;$h:120px;width: $h;line-height: $h;margin: 0 auto;text-align: center;font-size: 50px;margin-top: 20px;}
  .order-detail .plate-info{$h:140px;line-height: $h;text-align: center;font-size: 50px;}
	.order-detail .container{
    position: absolute;
    width: 100%;
    bottom: 50px;
    overflow-y: scroll;
    top:160px;
  }
	.order-list-title{border-bottom: $order-detail-line;}

	.order-detail{
		.menu{
			&:before{content: "";height: 60%;background: #3e3e3e;position: absolute;border-right: $order-detail-line;right: 50%;top: 50%;	transform: translateY(-50%);}
			background-color: white;margin-bottom: 5px;font-size: 16px;position:relative;border-bottom: $order-detail-line;
			.menu-item{position: relative;width: 50%;line-height:50px;display: inline-block;box-sizing: border-box;text-align: center;}
			.menu-item.active{
			.line{position: absolute;bottom: 0;width: 80%;height: 2px;background: $bg-color-primary;left:50%;transform: translateX(-50%)}
			}
		}
		.content{
			width: 100%;
			bottom: 0px;
			overflow-y: scroll;
			position: absolute;
			top: 56px;
			background: white;
			padding-bottom: 50px;
		}
		.content-detail{
			width: 100%;bottom: 50px;top:56px;position: absolute;background: white;overflow-y:scroll;
			.order-list-dt{border-top: $order-detail-line;}
			.order-list-dt .dt1,.order-list-dt .dt3{font-size: 16px;}
			.order-dd-height{line-height: 30px !important;}
			.order-list-dl{border-bottom: 0;border-bottom: $order-detail-line;}
		}
	}

	.order-status{
		$h:40px;background: #f7f7f7;
		dt{
			background-color:#f6f6f6; border-bottom: $order-detail-line;padding: 20px 0px;width: 10rem;vertical-align: middle;border-top: $order-detail-line;text-align: center;border-bottom: $order-detail-line;
			.detail-icon:before{font-size: 61px;}
			.process-msg{font-size: 16px;}
			.number{font-size: 26px;display: none;color: white;    font-style: initial;}
			.p-info{min-height: 66px;line-height: 66px;}
			.p-number{padding-top: 9px;}
			span{}
		}

		dd{
			$dd-h:50px;line-height: $dd-h;position: relative;background-color: white;padding: 0 20px;
			/*top:border-top: 1px solid #e1e1e1;*/
			$icon-status-h:11px;
			.status-msg{width: 70%;font-size: 14px;margin-left: 30px;color: #727272;}
			.time{float: right;font-size: 14px;color: #a6a6a6;}
			.icon-status-msg{border: 3px solid #f5c593;box-sizing: border-box;display: inline-block;height: $icon-status-h;width: $icon-status-h;background-color: $bg-color-primary;border-radius: 100%;}
			&:before{content: "";height: $dd-h/2+2px;background-color: $bg-color-primary;width: 1px;position: absolute;left: 20px+$icon-status-h/2-1px;}
			&:after{content: "";height: $dd-h/2+2px;background-color: $bg-color-primary;width: 1px;position: absolute;top:50%;left: 20px+$icon-status-h/2-1px;}
			&:first-of-type:before{height: 0;}
			&:last-of-type:after{height: 0;}
		}

		/*status*/
		.order-status{
			.order-fail{color:#c50500;font-size: 100px;}
		}

		/*icon*/
		.detail-icon {}
		.detail-icon:before{vertical-align: middle;font-size: 61px;}
		/*.detail-icon.icon-order-notify{color: $bg-color-primary;}*/
		.detail-icon.icon-order-numberplate{line-height: 62px;display: inline-block;min-width: 92px;background-color:$bg-color-primary;width: auto;padding: 0 10px;box-sizing:border-box;}
		.detail-icon.icon-notify-kitchen{color: $bg-color-primary;}
		.detail-icon.icon-notiy-fail{color: #d74038;}
		.detail-icon.icon-deliver-meals{color: $bg-color-primary;}
		.detail-icon.icon-cancel-order{color: #727272;}
		.icon-order-numberplate .number{display: block;}
	}
</style>
